<template>
  <view class="good-detail-wrap" v-if="info" >

    <view class="tip" v-if="info.online_pay === 0" >注：当前订购只显示为线上预定，需线下进行支付</view>

    <view class="top-box">
      <view class="merber">
        <image class="merber__img" :src="info.avatar || defaultHeader"></image>
        <view class="merber__desc">
          <view class="name">{{ info.account_name }}</view>
          <view class="desc">
            <view class="time">{{ info.created_at }}</view>
            <view class="split">|</view>
            <view class="count">{{ info.view_number }}次浏览</view>
          </view>
        </view>
      </view>
      <view class="title">
        {{ info.item_name }}
      </view>
      <view class="price"> <text style="margin-right: 4rpx;">¥</text>{{ info.price | changeSub }} </view>
      <!-- 脱离文档流，数据分离处理 -->
      <!-- <view class="count-line">
        <template v-if="info.end_time > 0" >
          <countDown
          :format="info.end_time > 1000 * 60 * 60 * 24 ? 'DD天HH:mm:ss' : 'HH:mm:ss'"
          suffix="后结束"
          :time="info.end_time"
          @finish="endTime"
          color="#1da541"></countDown>
        </template>
        <template v-else>
          <text>活动已结束</text>
        </template>
        <view class="stock">库存：{{ info.stock }}</view>
      </view> -->
    </view>
    <view class="block-line"></view>
    <!-- 内容 -->
    <view class="content">
      <view class="head-title">产品介绍</view>
      <rich-text :nodes="info.introduce"></rich-text>
    </view>
    <view class="btn-box">
      <button v-if="status === 'END'" class="pp-button end-btn" hover-class="pp-button--active">
        活动结束
      </button>
      <button v-else class="pp-button pay-btn" hover-class="pp-button--active" @tap="handleToOrder">
        立即订购
      </button>
    </view>
  </view>
</template>

<script>
import { defaultHeader } from '@/tool/static-img';
import countDown from '@/basic-components/u-count-down/index.vue';

import { momentDate } from '@/tool';
import { GOOD_DETAIL, GOOD_VIEW_ADD } from '@/api/good';
export default {
  components: {
    countDown,
  },
  data() {
    return {
      defaultHeader,
      id: '',
      info: null,
      status: '',
      goodInfos:[],
      shopId:''
    };
  },
  async onLoad({ id ,shopId}) {
    await this.getBindLoginStatus();

    this.id = id;
    this.shopId=shopId;

    this.getGoodDetail(id);

    //访问量加1
    this.GoodViewAdd()
  },
  methods: {
    endTime() {
      // 结束
      this.status = 'END';
    },
    handleToOrder() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.info.itemId=this.info.id;
      this.info.cnt=1;
      this.goodInfos[0]=this.info;
      this.$navigate({
        page: 'confirmOrder',
        params: {
          goodInfos: JSON.stringify(this.goodInfos),
          totalFee:JSON.stringify(this.info.price),
          shopId:this.shopId
          
        },
      });
    },
    GoodViewAdd() {
      this.$http.put(GOOD_VIEW_ADD, {
        item_id: this.id
      })
    },
    getGoodDetail(id) {
      this.$http.get(`${GOOD_DETAIL}/${id}`, {},{
        showLoading: true
      })
        .then(res => {
          uni.hideLoading()
          let data = res.data;
          const nowTime = new Date().getTime();
          data.thumbs = data.thumbs.split(',');

          // 发布时间
          const timeReduce = nowTime - data.created_at * 1000;
          const time = Math.floor(timeReduce / 1000 / 3600);
          if (time < 24) {
            data.created_at = `${time}小时前`;
          } else {
            data.created_at = momentDate(data.created_at, 'YYYY-MM-DD HH:mm');
          }
          console.log(data)
          this.info = data;
        })
    }
  },
};
</script>

<style lang="less">
.good-detail-wrap {
  position: relative;
  min-height: 100vh;
  padding-bottom: 136rpx;
  padding-bottom: calc(136rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
  .top-box {
    padding: 0 24rpx;
    background-color: #ffffff;
  }
  .merber {
    display: flex;
    align-items: center;
    padding: 30rpx 0 20rpx;
    &__img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }
    &__desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 28rpx;
      }
      .desc {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #999999;
      }
      .split {
        margin: 0 16rpx;
      }
    }
  }
  .title {
    font-size: 32rpx;
    font-weight: 500;
    padding-top: 20rpx;
  }
  .price {
    font-size: 34rpx;
    font-weight: 500;
    margin-top: 20rpx;
    color: #ff0000;
  }
  .count-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0 30rpx 0;
    .stock {
      font-size: 24rpx;
      color: #999999;
    }
  }
  .tip {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    position: fixed;
    bottom: 136rpx;
    bottom: calc(136rpx + constant(safe-area-inset-bottom));
    bottom: calc(136rpx + env(safe-area-inset-bottom));
    left: 0;
    font-size: 24rpx;
    font-weight: bold;
    color: #ff0000;
    border-radius: 10rpx;
  }
  .block-line {
    width: 100%;
    height: 16rpx;
    background-color: #f5f5f5;
  }
  .content {
    width: 100%;
    padding: 40rpx 24rpx 180rpx 24rpx;
    background-color: #ffffff;
    .head-title {
      position: relative;
      font-size: 28rpx;
      margin-bottom: 20rpx;
      color: #999999;
      text-align: center;
      &::before {
        content: '';
        position: absolute;
        left: 40rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 35%;
        height: 1px;
        background-color: #eeeeee;
      }
      &::after {
        content: '';
        position: absolute;
        right: 40rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 35%;
        height: 1px;
        background-color: #eeeeee;
      }
    }
  }
  .btn-box {
    position: fixed;
    bottom: 0;
    bottom: calc(constant(safe-area-inset-bottom));
    bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 136rpx;
    padding: 0 24rpx;
    background: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(204, 204, 204, 0.4);
    .pay-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      background-color: #fedd00;
    }
    .end-btn {
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      color: #666666;
    }
  }
}
</style>
